<script setup name="StudentStudentEdit">
import { ref, watchEffect, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import service from '@/utils/request';

const router = useRouter();
const studentOldData = router.currentRoute.value.query;

// 选择框相关
const selectedMajor = ref(studentOldData.major);
const selectedClass = ref(studentOldData.class);
const majorClassOptions = ref([]);
const majorOptions = ref([]);
const classOptions = ref([]);

watchEffect(() => {
    if (majorClassOptions.value.length === 0) return;
    majorOptions.value = majorClassOptions.value.map((item) => {
        return item.major;
    })
    majorClassOptions.value.forEach((item) => {
        if(item.major === selectedMajor.value){
            classOptions.value = item.classnames || [];
        }
    })
})

// 学生新信息
const studentNewData = ref({
    name: studentOldData.name,
    id: studentOldData.id,
    grade: studentOldData.grade,
    major: selectedMajor.value,
    class: selectedClass.value,
});

// 获取专业和班级
const getMajorClass = () => {
    service({
        method: "get",
        url: "/superadmin/student/majorclass",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
    }).then((res) => {
        //console.log(res);
        if(res.message === '请求正常'){
            majorClassOptions.value = res.data;
        } else {
            ElMessage({
                message: '获取数据失败',
                type: 'error',
            });
            majorClassOptions.value = [];
        }
    }).catch((error) => {
        ElMessage({
            message: '获取数据失败',
            type: 'error',
        });
        majorClassOptions.value = [];
    })
}

// 点击保存按钮
const saveClick = () => {
    //console.log(studentNewData.value.class);
    service({
        method: "post",
        url: "/superadmin/student/changemessage",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
        data: {
            oldId: studentOldData.id,
            newId: studentNewData.value.id,
            name: studentNewData.value.name,
            grade: studentNewData.value.grade,
            major: studentNewData.value.major,
            className: studentNewData.value.class,
        }
    }).then((res) => {
        //console.log(res);
        if (res.message === '请求正常') {
            // 更新数据
            studentOldData.name = studentNewData.value.name;
            studentOldData.id = studentNewData.value.id;
            studentOldData.grade = studentNewData.value.grade;
            studentOldData.major = studentNewData.value.major;
            studentOldData.class = studentNewData.value.class;
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '保存失败',
                type: 'error',
            })
        }
    })
}

// 页面加载时获取专业和班级
onMounted(() => {
    getMajorClass();
})
</script>

<template>
    <div class="StudentStudentEdit">
        <div class="header">
            <span @click="router.push('/superAdministrator/student')" class="breadcrumb-link">班级管理</span>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-current">学生信息</span>
        </div>
        
        <div class="layout">
            <div class="content">
                <div class="layoutHeader">学生信息</div>
                
                <div class="layoutContent">
                    <div class="item">
                        <span class="title">姓名</span>
                        <input 
                            type="text" 
                            :placeholder="studentOldData.name" 
                            v-model="studentNewData.name"
                            @blur="studentNewData.name = studentNewData.name || studentOldData.name"
                            class="form-input"
                        >
                    </div>
                    <div class="item">
                        <span class="title">学号</span>
                        <input 
                            type="text" 
                            :placeholder="studentOldData.id" 
                            v-model="studentNewData.id"
                            @blur="studentNewData.id = studentNewData.id || studentOldData.id"
                            class="form-input"
                        >
                    </div>
                    <div class="item">
                        <span class="title">年级</span>
                        <input 
                            type="text" 
                            :placeholder="studentOldData.grade" 
                            v-model="studentNewData.grade"
                            @blur="studentNewData.grade = studentNewData.grade || studentOldData.grade"
                            class="form-input"
                        >
                    </div>
                    <div class="item">
                        <span class="title">专业</span>
                        <el-select 
                            v-model="studentNewData.major" 
                            placeholder="请选择专业" 
                            class="form-select"
                            no-data-text="暂无数据"
                        >
                            <el-option v-for="item in majorOptions" :label="item" :value="item" ></el-option>
                        </el-select>
                    </div>
                    <div class="item">
                        <span class="title">班级</span>
                        <el-select 
                            v-model="studentNewData.class" 
                            placeholder="请选择班级"
                            class="form-select"
                            no-data-text="请选择专业"
                        >
                            <el-option v-for="item in classOptions" :label="item" :value="item"></el-option>
                        </el-select>
                    </div>
                </div>
                
                <div class="layoutFooter">
                    <div class="save-btn" @click="saveClick">保存</div>
                    <div class="cancel-btn" @click="router.push('/superAdministrator/student')">返回</div>
                </div>                
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
// 颜色变量
$primary-color: #4464a2;
$primary-hover: #5a7cb8;
$gray-color: #909399;
$gray-hover: #a6a9ad;
$border-color: #dcdfe6;
$border-hover: #c0c4cc;
$text-primary: #303133;
$text-secondary: #606266;
$danger-color: #f56c6c;

.StudentStudentEdit {
    width: 100%;
    height: 100%; // 使用最小高度而非固定高度
    background-color: #f5f7fa;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; // 防止水平溢出
    .header {
        width: 100%;
        height: 60px;
        padding-left: 30px;
        display: flex;
        align-items: center;
        color: $gray-color;
        background-color: white;
        border-bottom: 1px solid $border-color;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        
        .breadcrumb-link {
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover {
                color: $primary-color;
                font-weight: 600;
            }
        }
        
        .breadcrumb-separator {
            margin: 0 10px;
            color: $border-color;
        }
        
        .breadcrumb-current {
            color: $text-secondary;
            font-weight: 500;
        }
    }
    
    .layout {
        height: calc(100% - 60px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        box-sizing: border-box;
        .content {
            width: 100%;
            max-width: 1000px;
            background-color: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            
            &:hover {
                box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
            }
            
            .layoutHeader {
                width: 100%;
                height: 60px;
                display: flex;
                align-items: center;
                font-size: 22px;
                font-weight: 600;
                color: $text-primary;
                border-bottom: 2px solid $primary-color;
                margin-bottom: 40px;
                padding-left: 10px;
            }
            
            .layoutContent {
                flex: 1;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 30px;
                
                .item {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center; // 居中对齐
                    gap: 30px;
                    transition: all 0.3s ease;
                    flex-wrap: wrap; // 允许换行，避免溢出
                    
                    .title {
                        width: 100px;
                        text-align: right;
                        font-size: 16px;
                        font-weight: 500;
                        color: $text-primary;
                        position: relative;
                        flex-shrink: 0; // 防止标题缩小
                        
                        &::before {
                            content: "*";
                            color: $danger-color;
                            position: absolute;
                            right: -10px;
                        }
                    }
                    
                    .form-input {
                        flex: 0 1 400px; // 不放大，可缩小，基础宽度400px
                        height: 44px;
                        border: 1px solid $border-color;
                        border-radius: 8px;
                        padding: 0 16px;
                        font-size: 15px;
                        color: $text-primary;
                        transition: all 0.3s ease;
                        background-color: #fafafa;
                        
                        &:focus {
                            outline: none;
                            border-color: $primary-color;
                            background-color: white;
                            box-shadow: 0 0 0 3px rgba(68, 100, 162, 0.1);
                            transform: translateY(-1px);
                        }
                        
                        &:hover:not(:focus) {
                            border-color: $primary-color;
                            background-color: white;
                        }
                    }
                    
                    .form-select {
                        flex: 0 1 400px; // 不放大，可缩小，基础宽度400px
                        height: 44px !important;
                        
                        .el-input__wrapper {
                            height: 44px !important;
                            border-radius: 8px;
                            
                            &:focus-within {
                                box-shadow: 0 0 0 3px rgba(68, 100, 162, 0.1);
                                border-color: $primary-color;
                            }
                        }
                    }
                }
            }
            
            .layoutFooter {
                width: 100%;
                display: flex;
                justify-content: center; // 居中显示
                gap: 20px; // 减小间距
                margin-top: 40px;
                margin-bottom: 20px; // 添加底部边距
                flex-wrap: wrap; // 允许按钮换行，避免溢出
                
                .save-btn, .cancel-btn {
                    flex: 0 1 120px; // 不放大，可缩小，基础宽度120px
                    min-width: 100px; // 设置最小宽度
                    height: 44px;
                    border-radius: 8px;
                    text-align: center;
                    line-height: 44px;
                    font-size: 16px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 0;
                        height: 0;
                        border-radius: 50%;
                        background-color: rgba(255, 255, 255, 0.2);
                        transform: translate(-50%, -50%);
                        transition: width 0.6s, height 0.6s;
                    }
                    
                    &:active::after {
                        width: 300px;
                        height: 300px;
                    }
                }
                
                .save-btn {
                    background-color: $primary-color;
                    color: white;
                    
                    &:hover {
                        background-color: $primary-hover;
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(68, 100, 162, 0.3);
                    }
                }
                
                .cancel-btn {
                    background-color: white;
                    color: $text-secondary;
                    border: 1px solid $border-color;
                    
                    &:hover {
                        border-color: $primary-color;
                        color: $primary-color;
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    }
                }
            }
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .StudentStudentEdit {
        .header {
            padding-left: 15px;
            font-size: 14px;
        }
        
        .layout {
            padding: 20px 15px;
            
            .content {
                padding: 20px;
                border-radius: 8px;
                
                .layoutHeader {
                    font-size: 18px;
                    height: 50px;
                    margin-bottom: 30px;
                }
                
                .layoutContent {
                    gap: 25px;
                    
                    .item {
                        flex-direction: column;
                        align-items: stretch; // 改为拉伸以适应宽度
                        gap: 10px;
                        
                        .title {
                            width: 100%;
                            text-align: left;
                            padding-left: 10px;
                            
                            &::before {
                                left: 0;
                            }
                        }
                        
                        .form-input,
                        .form-select {
                            flex: 1;
                            width: 100%;
                            min-width: unset; // 移除最小宽度限制
                        }
                    }
                }
                
                .layoutFooter {
                    flex-direction: column;
                    gap: 15px;
                    align-items: stretch; // 改为拉伸以适应宽度
                    
                    .save-btn, .cancel-btn {
                        flex: 1;
                        width: 100%;
                        min-width: unset; // 移除最小宽度限制
                    }
                }
            }
        }
    }
}

// 针对极窄屏幕的额外优化
@media (max-width: 480px) {
    .StudentStudentEdit {
        .layout {
            padding: 10px;
            
            .content {
                padding: 15px;
                
                .layoutContent {
                    .item {
                        .form-input,
                        .form-select {
                            height: 40px; // 略微减小高度
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
</style>